<template>
	<view class="page">
		<view v-if="dangerListLen" class="danger-list">
			<view v-for="(item, index) in dangerList" :key="item.id" class="danger-item">
				<view class="code">
					<text>编号:</text>
					<text class="u-p-l-5">{{ item.id }}</text>
				</view>

				<view class="name">
					<text>危险源名称:</text>
					<text class="content u-line-1">{{ item.name }}</text>
				</view>

				<view v-if="item.status === 1" class="status approve" hover-class="hover-class" @tap="reviewDangerItem(item)"><text>查看详情</text></view>

				<view v-if="item.status === 0" class="status edit" hover-class="hover-class" @tap="editDangerItem(item)"><text>编辑</text></view>

				<view v-if="item.status === 0" class="status del" hover-class="hover-class" @tap="delDangerItem(item)"><text>删除</text></view>
			</view>

			<uni-load-more :status="loadingStatus"></uni-load-more>
		</view>

		<u-empty v-if="!dangerListLen && loadingDataDone" text="暂无危险源清单" />

		<button class="danger-btn" hover-class="hover-class" @tap="addDangerForm">新增上报清单</button>
	</view>
</template>

<script>
const pagination = {
	page: 1,
	limit: 10
}
export default {
	data() {
		return {
			dangerList: [],
			loadingDataDone: false,
			loadingStatus: 'more' //more/loading/noMore
		}
	},
	computed: {
		dangerListLen() {
			return this.dangerList.length
		}
	},
	onLoad() {},
	onShow() {
		this.refreshDataList().then(() => {
			this.loadingDataDone = true
		})
	},
	onReady() {},
	onPullDownRefresh() {
		this.refreshDataList().then(() => {
			uni.stopPullDownRefresh()
		})
	},
	onReachBottom() {
		if (['noMore', 'loading'].includes(this.loadingStatus)) return
		this.loadingStatus = 'loading'
		pagination.page += 1
		this.getDangerList()
	},
	methods: {
		async refreshDataList() {
			pagination.page = 1
			await this.getDangerList()
		},
		toLower(str) {
			return str.toLowerCase()
		},
		addDangerForm() {
			const url = `/pages/danger/edit/index?type=add`
			uni.navigateTo({
				url
			})
		},
		delDangerItem({ id }) {
			//钉钉小程序真机与模拟器表现有差异，真机title，content均为必填项
			uni.showModal({
				title: '删除危险源',
				content: '确定要删除当前危险源吗?',
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if (res.confirm) {
						this.delDanger(id)
					}
				}
			})
		},
		async delDanger(id) {
			const params = {
				id
			}

			try {
				const res = await uni.$uu.Api.delDanger(params)
				console.log(res)
				if (res.code === 100) {
					uni.showToast({
						title: '删除成功',
						success: () => {
							this.refreshDataList()
						}
					})
				}
			} catch (e) {
				console.log(e)
			}
		},
		editDangerItem({ id }) {
			const url = `/pages/danger/edit/index?type=edit&id=${id}`
			uni.navigateTo({
				url
			})
		},
		reviewDangerItem({ id }) {
			const url = `/pages/danger/detail/index?id=${id}`
			uni.navigateTo({
				url
			})
		},
		handleLoadMore(res) {
			if (res.content.length < 10) {
				this.loadingStatus = 'noMore'
			} else {
				this.loadingStatus = 'more'
			}
		},
		async getDangerList() {
			const params = {
				page: pagination.page,
				size: pagination.limit,
				type: 1 //获取列表的类型，0标识上报列表，1标识公示列表
			}

			try {
				const res = await uni.$uu.Api.getDangerList(params)
				console.log(res)
				if (res.code === 100) {
					this.dangerList = pagination.page == 1 ? [...res.content] : [...this.dangerList, ...res.content]
					this.handleLoadMore(res)
				}
			} catch (e) {
				console.log(e)
			}
		}
	}
}
</script>

<style lang="scss">
@import '~@/common/scss/index.scss';
@import './index.scss';
</style>
